<template>
  <zc-card>
    <avue-crud
      ref="crud"
      :option="option"
      :page.sync="page"
      :table-loading="loading"
      @on-load="getList"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @refresh-change="refreshChange"
      @search-reset="searchChange"
      @search-change="searchChange"
      v-model="form"
      :data="data"
      :permission="permission"
    >
      <template slot="state" slot-scope="scope">
        <el-tag v-if="scope.row.state == 1">启用</el-tag>
        <el-tag type="danger" v-if="scope.row.state == 2">禁用</el-tag>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button
          v-if="permission.distributionBtn"
          @click="handlePermission(scope, scope.index)"
          :size="scope.size"
          :type="scope.type"
          >分配</el-button
        >
        <el-button
          v-if="permission.editBtn"
          icon="el-icon-edit"
          :type="scope.type"
          :size="scope.size"
          @click.stop="handleEdit(scope.row, scope.index)"
          >编辑</el-button
        >
        <el-button
          v-if="permission.delBtn"
          icon="el-icon-delete"
          :type="scope.type"
          :size="scope.size"
          @click.stop="handleDel(scope.row, scope.index)"
          >删除</el-button
        >
      </template>
    </avue-crud>

    <el-dialog title="分配权限" :visible.sync="dialogPermissionVisible">
      <el-tree
        default-expand-all
        :data="datax"
        show-checkbox
        node-key="id"
        ref="tree"
        :default-checked-keys="selectNode"
        :props="defaultProps"
      ></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updatePermession()">更 新</el-button>
      </div>
    </el-dialog>
  </zc-card>
</template> 

<script>
import { mapGetters } from "vuex";
import {
  getList,
  update,
  add,
  del,
  getAllRoles,
  updateRoles,
} from "@/api/admin/role.js";
import option from "./role-options.js";

export default {
  name: "role",
  data() {
    return {
      permission: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
        distributionBtn: false,
      },
      rwo: {}, // 当前行
      selectNode: [], // 选中节点
      datax: [], //
      defaultProps: {
        children: "children",
        label: "name",
      },
      dialogPermissionVisible: false, // 权限弹窗
      page: {
        currentPage: 1,
        pageSize: 10,
      },
      form: {},
      params: {},
      loading: false,
      data: [],
      option: option(this),
    };
  },
  created() {
    
   const role = this.$defaultRoleStatus;
    this.permission.addBtn = this.zcbtn[this.$options.name + "_add"] || role;
    this.permission.editBtn = this.zcbtn[this.$options.name + "_edit"] || role;
    this.permission.delBtn = this.zcbtn[this.$options.name + "_del"] || role;
    this.permission.excelBtn =
      this.zcbtn[this.$options.name + "_excel"] || role;
    this.permission.distributionBtn = this.zcbtn.role_distribution || role;
    // console.log("我是zcbtn", this.zcbtn);
    // console.log(this.zcrouter);
  },
  mounted() {},
  computed: {
    ...mapGetters(["zcrouter", "zcbtn"]),
  },
  methods: {
    // 自定义删除
    handleDel(row, index) {
      
      this.$refs.crud.rowDel(row, index);
    },
    // 自定义编辑
    handleEdit(row, index) {
      this.$refs.crud.rowEdit(row, index);
    },
    updatePermession() {
      let arr1 = this.$refs.tree.getCheckedKeys() || [];
      let arr2 = this.$refs.tree.getHalfCheckedKeys() || [];
      let arr3 = [...arr1, ...arr2];

      // console.log(arr3.join(","), this.row.id);
      updateRoles({
        role_id: this.row.id,
        roleval: arr3.join(","),
      }).then((res) => {
        // console.log(res);
        this.$store.dispatch("user/getInfo");
        this.$message.success("修改成功");
        this.getList();
        this.dialogPermissionVisible = false;
      });
    },

    handlePermission(row, index) {
      let newArr = [];
      function zc2(item) {
        if (item.length !== 0) {
          item.forEach((e, i) => {
            if (e.children == 0) {
              newArr.push(e.id + "");
            }
            zc2(e.children);
          });
        }
      }
      let _self = this;
      this.dialogPermissionVisible = true;
      this.row = { ...row.row };
      // console.log("拥有的权限", row.row.roleval);
      // 获取菜单
      getAllRoles({ role_id: row.row.id }).then((res) => {
        this.datax = res;
        if (row.row.roleval) {
          // 获取没有子节点，选中的  解决el-tree问题
          zc2(res);
          // 二者交集
          let arr = newArr.filter(function (val) {
            return row.row.roleval.split(",").indexOf(val) > -1;
          });
          this.selectNode = arr;
          // console.log("2ge", arr, newArr, row.row.roleval.split(","));
        } else {
          this.selectNode = [];
        }
      });
    },
    getList() {
      this.loading = true;
      const data = Object.assign(
        {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
        },
        this.params
      );
      this.data = [];
      getList(data).then((res) => {
        // console.log("全部", res);
        this.loading = false;
        this.page.total = res.num;

        this.data = res.data;
      });
    },
    rowSave(row, done, loading) {
      // console.log("新增", row);

      add(Object.assign({}, row))
        .then(() => {
          this.$message.success("新增成功");
          done();
          this.getList();
        })
        .catch(() => {
          loading();
        });
    },
    rowUpdate(row, index, done, loading) {
      let params = {
        role_name: row.role_name,
        sort: row.sort,
        state: row.state,
        cmark: row.cmark,
        id: row.id,
        weight: row.weight,
      };
      update(Object.assign({}, params))
        .then(() => {
          this.$message.success("修改成功");
          done();
          this.getList();
        })
        .catch(() => {
          loading();
        });
    },
    rowDel(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return del({ id: row.id });
        })
        .then(() => {
          this.$message.success("删除成功");
          this.getList();
        });
    },
    searchChange(params, done) {
      if (done) done();
      this.params = params;
      this.page.currentPage = 1;
      this.getList();
      this.$message.success("搜索成功");
    },
    refreshChange() {
      this.getList();
      this.$message.success("刷新成功");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>